 <template>
  <el-table :data="songList" style="width: 100%">
    <el-table-column width="170">
      <template slot-scope="scope">
        <div class="list-operations">
          <img src="./images/play.png" @click="play(scope.row.id,scope.row.name)" alt />
          <img src="./images/mv.png" alt />
          <img src="./images/collect.png" alt />
        </div>
      </template>
    </el-table-column>
    <el-table-column label="歌曲名称" width="150">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
        <el-table-column label="歌曲名称" width="150">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.artists[0].name }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
  <script>
import { getSongUrl } from "../../api/music";
export default {
  props: {
    songList: {
      type: Array
    }
  },
  data() {
    return {
        currentSong:{
            name:'',
            img:'',
        }
    };
  },
  methods: {
    async play(id,songName) {
      const data = await getSongUrl(id);
      this.$emit("loadsong",data.data.data[0].url,songName);
    },
  },
  watch:{
      url:function(value){
          console.log(value)
      }
  }
}
</script>
<style scoped>
.list-operations {
  margin-left: 10px;
}
.list-operations > img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  cursor: pointer;
}
</style>